<template>
    <div class="card">
      <!-- 这里业于NavList的数据已经按照已经定义好了  所以我们通过title来查找商家 来定位单商家页 至于商品的单独页 就使用id来找了 实际项目中我们是可以将id分为 商家id和商品id   -->
       <!-- 在这里选择pinia 来管理数据以及传参 -->
        <van-card @click="handleClick(props.data.shopper)"
        :price="props.data.price"
        :desc="props.data.shopper"
        :title="props.data.title"
        :thumb="props.data.img"
      >
        <template #tags>
          <van-tag v-for="(tag, index) in props.data.label" :key="index" plain type="primary">{{ tag }}</van-tag>
        </template>
        <template #footer>
          <van-button size="mini" class="add-to-cart-btn" @click.stop="handleAddToCart(props.data)">加入购物车</van-button>
        </template>
</van-card>
</div>
  </template>
  
  <script setup>
  import { showSuccessToast } from 'vant'
  import { useRouter } from 'vue-router'
  import { useShopperStore } from '../store/shopper'
  import { useCartStore } from '../store/cart'  
  const shopperStore = useShopperStore()
  const cartStore = useCartStore()
  const router = useRouter()
const props = defineProps(['data'])
  const handleClick = (shopper) => { 
    shopperStore.shopper = shopper
    console.log(shopper)
    router.push({
      path: '/shopper',
    })
  }

  const handleAddToCart = (data) => { 
    console.log(data);
    showSuccessToast('添加成功');
    cartStore.addToCart(data)    
  }
  </script>
  
  <style scoped lang="scss">
  .card {
    margin: 8px 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 
      0 4px 12px rgba(255, 229, 153, 0.15),
      0 2px 4px rgba(255, 229, 153, 0.1);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 229, 153, 0.2);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 
        0 8px 20px rgba(255, 229, 153, 0.25),
        0 4px 8px rgba(255, 229, 153, 0.15);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
  
  /* 自定义 van-card 样式 */
  :deep(.van-card) {
    background: transparent !important;
    padding: 16px !important;
    
    .van-card__header {
      margin-bottom: 12px;
    }
    
    .van-card__thumb {
      width: 88px !important;
      height: 88px !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.6);
      
      img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transition: transform 0.3s ease;
        
        &:hover {
          transform: scale(1.05);
        }
      }
    }
    
    .van-card__content {
      min-height: 88px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
    }
    
    .van-card__title {
      font-size: 16px !important;
      font-weight: 600 !important;
      color: #8b7355 !important;
      line-height: 1.4 !important;
      margin-bottom: 6px !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    
    .van-card__desc {
      font-size: 13px !important;
      color: #a0956b !important;
      line-height: 1.5 !important;
      margin-bottom: 8px !important;
      max-width: 200px !important;
    }
    
    .van-card__bottom {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
    }
    
    .van-card__price {
      font-size: 18px !important;
      font-weight: 700 !important;
      color: #ff9800 !important;
      
      &-integer {
        font-size: 20px !important;
      }
      
      &-currency {
        font-size: 14px !important;
        margin-right: 2px !important;
      }
    }
  }
  
  /* 标签样式 */
  :deep(.van-tag) {
    background: rgba(255, 229, 153, 0.2) !important;
    color: #8b7355 !important;
    border-color: rgba(255, 229, 153, 0.4) !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    margin-right: 6px !important;
    border-radius: 12px !important;
    backdrop-filter: blur(1px);
    
    &:last-child {
      margin-right: 0 !important;
    }
    
    &:hover {
      background: rgba(255, 229, 153, 0.3) !important;
      border-color: rgba(255, 229, 153, 0.6) !important;
    }
  }
  
  /* 加入购物车按钮 */
  .add-to-cart-btn {
    background: linear-gradient(135deg, #ffecb3 0%, #ffe082 100%) !important;
    border: 1px solid rgba(255, 229, 153, 0.5) !important;
    color: #8b7355 !important;
    font-weight: 500 !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 6px rgba(255, 229, 153, 0.2);
    
    &:hover {
      background: linear-gradient(135deg, #ffe082 0%, #ffd54f 100%) !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 10px rgba(255, 229, 153, 0.3) !important;
    }
    
    &:active {
      transform: translateY(0) !important;
    }
  }
  
  /* 响应式设计 */
  @media (max-width: 375px) {
    .card {
      margin: 6px 0;
    }
    
    :deep(.van-card) {
      padding: 12px !important;
      
      .van-card__thumb {
        width: 76px !important;
        height: 76px !important;
      }
      
      .van-card__content {
        min-height: 76px !important;
      }
      
      .van-card__title {
        font-size: 14px !important;
      }
      
      .van-card__desc {
        font-size: 12px !important;
      }
      
      .van-card__price {
        font-size: 16px !important;
        
        &-integer {
          font-size: 18px !important;
        }
      }
    }
  }
  
  /* 暗色模式支持 */
  @media (prefers-color-scheme: dark) {
    .card {
      background: linear-gradient(135deg, #3c3c3c 0%, #4a4a4a 100%);
      border-color: rgba(255, 229, 153, 0.3);
      
      :deep(.van-card__title) {
        color: #f5f5dc !important;
      }
      
      :deep(.van-card__desc) {
        color: #d4c5a0 !important;
      }
      
      :deep(.van-tag) {
        background: rgba(255, 229, 153, 0.15) !important;
        color: #f5f5dc !important;
        border-color: rgba(255, 229, 153, 0.3) !important;
      }
      
      .add-to-cart-btn {
        background: linear-gradient(135deg, rgba(255, 229, 153, 0.3) 0%, rgba(255, 224, 130, 0.4) 100%) !important;
        color: #f5f5dc !important;
        border-color: rgba(255, 229, 153, 0.4) !important;
      }
    }
  }
  </style>